<template>
  <div class="top_menu">
    <!-- 综合管理 -->
    <mul-mange/>
     <!-- 车务管理 -->
    <traffic-manger />

    <!-- 司机管理 -->
    <driver-manage />

    <!-- 行驶规定 -->
    <driving-view />

    <!-- 费用油耗加水统计 -->
    <oilconsumption-view ref="tongji"/>
    <!-- 数据一张图 -->
    <span @click="openYZT" style="cursor: pointer">数据一张图</span>
    <div class="dlicon">
      
      <dl @click="openYZT">
        <dd><img src="../../../img/chart2.png" alt=""></dd>
        <dt>一张图统计</dt>
      </dl>
      <dl @click="openYH">
        <dd><img src="../../../img/车辆油耗成本.png" alt=""></dd>
        <dt>油耗统计</dt>
      </dl>
      <dl @click="openFY">
        <dd><img src="../../../img/费用.png" alt=""></dd>
        <dt>费用统计</dt>
      </dl>
      <dl @click="openJS">
        <dd><img src="../../../img/水.png" alt=""></dd>
        <dt>加水统计</dt>
      </dl>
    </div>
  </div>
</template>

<script>
// 综合管理
import mulManger from '@/views/TrafficEngineer/ToolBar/management.vue'
//车务管理
import TrafficManger from '@/views/TrafficEngineer/ToolBar/trafficManger.vue'
// 司机管理
import DriverManage from '@/views/TrafficEngineer/ToolBar/driverManage.vue'
// 行驶规定
import Driving from '@/views/TrafficEngineer/ToolBar/driving.vue'
// 费用油耗加水统计
import OilconSumption from '@/views/TrafficEngineer/ToolBar/Oilconsumption.vue'
export default {
   methods: {
    openYZT () {
      // let user = ''
      // let clientNo = `${this.$route.query.ClientNo}`
      // if (clientNo == '0000001') {
      //   user = 'glx'
      // }
      // if (clientNo == '0000004') {
      //   user = 'yx'
      // }
      // let date = new Date()
      // let seperator1 = "-"
      // let year = date.getFullYear()
      // let month = date.getMonth() + 1
      // if (month >= 1 && month <= 9) {
      //   month = "0" + month
      // }
      // let DateTime = year + seperator1 + month
      // window.open('http://111.160.78.62:9936/indexService.html?user='+user+'&&date='+DateTime, '_blank')
      this.$refs.tongji.openYZT()
    },
    //费用统计
    openFY(){
      this.$refs.tongji.openqbclfy()
    },
    //加水统计
    openJS(){
      this.$refs.tongji.openqbcljs()
    },
    //油耗统计
    openYH(){
      this.$refs.tongji.openqbclyhlc()
    }
  },
  components: {
    'traffic-manger': TrafficManger,
    'driver-manage': DriverManage,
    'driving-view': Driving,
    'oilconsumption-view': OilconSumption,
    'mul-mange':mulManger
  }
}
</script>

<style scoped lang="less">
.top_menu {
  height: 30px;
  color: #333;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size:20px;
  font-weight: 600;
  padding:8px;
  position: relative;
  border:2px solid #3baefa;
  border-right: 0;
  border-left: 0;
  .spanhover:hover{
    color: #3baefa;
  }
}
.displaynone{
  display: none;
}
.statistical {
  width: 600px;
  min-height: 390px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  .title {
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ccc;
    padding-left: 5px;
    box-sizing: border-box;
    h3 {
      color: #666;
    }
    span {
      margin-left: 450px;
    }
  }
  .statistical_content {
    min-height: 310px;
    padding: 0 20px;
    background-color: #f3f3f3;
    overflow-y: auto;
  }
  .statistical_time {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    color: #666;
    background-color: #f3f3f3;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
  }
}
.dlicon{
  width: 100%;
  position:absolute;
  z-index: 11;
  left: 0;
  top: 28px;
  background-color: #3baefa;
  opacity: 1;
  display: flex;
  dl{
    width:80px;
    height: 55PX;
    margin:10px;
    margin-right:0;
    border-radius: 5px;
    border:2px solid #2c2c2c;
    box-sizing: border-box;
    background: #fff;
    padding:5px;
    dd{
      width:70%;
      height:60%;
      text-align: center;
      margin: 2% auto;
      img{
        width: 100%;
        height: 100%;

      }
    }
    dt{
      font-size: 12px!important;
      font-weight: 300;
      text-align: center;
      cursor:default;
      color: #2c2c2c;
    }
  }
  dl:hover{
    border:2px solid #ccc;
    box-shadow:0 0 15px 1px #525050;
  }
}
</style>